<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>1F-添加/编辑坐标点</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="imgBox" id="map_point">
          <img :src="mapSrc" alt="" id="myBiaoZhu">
          <!--      坐标点位 -->
          <div class="point-list" v-for="(item,index) in banMa" :key="index"
               :style="{left:item.positionLat+'px',top:item.positionLng+'px'}">
            <!-- 监控坐标警报  -->
            <div class="iconfont iconshipinjiankongicon" v-if="pointInfo.type==2">
              <div class="domContainer">
                <div class="dot"></div>
                <!--                <div class="pulse warningBg"></div>-->
                <!--                <div class="pulse-big warningColor"></div>-->
                <div class="pulse successBg"></div>
                <div class="pulse-big successColor"></div>
              </div>
            </div>
            <!--            文字名称-->
            <div class="point-text" v-if="pointInfo.type==1">
              <span>{{ pointInfo.name }}</span>
            </div>
            <!--            区角位置-->
            <div class="domContainer_corner" v-if="pointInfo.type==3">
              <div class="dot"></div>
              <div class="pulse successBg"></div>
              <div class="pulse-big successColor"></div>
            </div>
            <div class="domContainer_corner" v-if="pointInfo.type==4">
              <div class="dot"></div>
              <div class="pulse successBg"></div>
              <div class="pulse-big successColor"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button @click="saveMap" size="small" type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['visible', 'pointInfo', 'mapPic'], // commoent 学生点评 collection 学生采集
  components: {},
  data() {
    return {
      dialogVisible: false,
      mapSrc: '',
      banMa: [],
      proportionX: 0, // 比例 x
      proportionY: 0, // 比例 y
      imageOption: [0, 0],
      mapPoint: []// 保存坐标
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('坐标信息：', this.pointInfo, this.mapPic)
        this.mapSrc = this.mapPic
        this.loadImage()
      } else {
        this.banMa = []
      }
    }
  },
  created() {
  },
  methods: {
    loadImage() {
      // let banMaData = {
      //   positionLat: 984.95,
      //   positionLng: 70.97,
      // }
      let n = this;
      let nImg = new Image();
      nImg.src = this.mapSrc;
      nImg.onload = function () {
        n.imageOption[0] = nImg.width;
        n.imageOption[1] = nImg.height;
        // 单前图片尺寸
        let myImg = document.querySelector("#myBiaoZhu");
        let currWidth = myImg.clientWidth;
        let currHeight = myImg.clientHeight;
        n.proportionX = (currWidth / nImg.width)// 比例 681 147 .toFixed(2)
        n.proportionY = (currHeight / nImg.height)// 比例 681 147
        console.log('原始图片尺寸：', nImg.width + " " + nImg.height)
        console.log('目前的宽高：', currWidth, currHeight)
        console.log('比例：', (currWidth / nImg.width))
        // console.log('banMaData.positionLat*currWidth:', parseFloat(banMaData.positionLat) * parseFloat(currWidth))
        // console.log(parseFloat(banMaData.positionLat))
        // console.log(parseFloat(n.proportionX))
        if (n.pointInfo.point) {
          n.banMa.push({
            positionLat: parseFloat(n.pointInfo.point[0]) * parseFloat(n.proportionX),
            positionLng: parseFloat(n.pointInfo.point[1]) * parseFloat(n.proportionY),
          })
        }

        n.mapInitFn()
      }

    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    saveMap() {
      if (!this.mapPoint.length) {
        this.$message.error('点击地图图层选择坐标')
        return
      }
      this.$emit('getPoint', this.mapPoint)
      this.closePOpup()
    },
    mapInitFn() {
      // this.doDraw(floorOption)
      document.getElementById("myBiaoZhu").oncontextmenu = e => {
        if (e && e.preventDefault) {
          //阻止默认浏览器动作(W3C)
          e.preventDefault();
        } else {
          //IE中阻止函数器默认动作的方式
          window.event.returnValue = false;
        }
        return false;
      }; //阻止冒泡行为和默认右键菜单事件
      // console.log(196, this.parseImgUr == undefined);
      document.getElementById("myBiaoZhu").onmousedown = e => {
        e = e || window.event;
        // console.log(this.serialNumber);
        // console.log(this.serialNumber.length);
        // debugger;
        // if (this.serialNumber.length == 0 && this.parseImgUrl.length > 0) {
        //   // console.log(this.banMa.length);
        //   this.$refs.selectEquipment.visible = true;
        //   this.$refs.selectEquipment.formConfig.isShowSubmitBtn = true;
        //   return false;
        // }
        if (e.button !== 2) {
          this.banMa = []
          //判断是否右击
          /*
        event.screenX是屏幕左上角到鼠标当前位置的x轴距离;
        event.clientX是浏览器左上角到鼠标当前位置的x轴距离;
        event.setoffX是鼠标当前点击控件左上角到鼠标当前位置的x轴距离;
        */
          let x = e.offsetX || e.layerX;
          let y = e.offsetY || e.layerY;
          console.log('鼠标点击的坐标点', x, y);
          let myImg = document.querySelector("#myBiaoZhu");
          let currWidth = myImg.clientWidth;
          let currHeight = myImg.clientHeight;
          console.log('目前的宽高：', currWidth, currHeight)
          // var ProportionWidthInImg = x / currWidth;
          // var ProportionHeightInImg = y / currHeight;
          // console.log("图片比例高度："+ProportionHeightInImg)
          // console.log("图片比例宽度："+ProportionWidthInImg)
          this.banMa.push({
            id: this.banMa.length + 1,
            positionLat: x,
            positionLng: y,
          });
          console.log('坐标内容', (x / this.proportionX).toFixed(2), (y / this.proportionY).toFixed(2))
          this.mapPoint = [(x / this.proportionX).toFixed(2), (y / this.proportionY).toFixed(2)]
          window.localStorage.setItem('mapPoint', JSON.stringify(this.banMa))
          // this.createMarker(x, y);
        }
      };
    }
  },
  mounted() {

  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 90%;
  height: 85%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  /*padding: 20px;*/
  flex: 1;
  overflow-y: auto;

}

.close-Btn-line {
  cursor: pointer;
}

#map_point {
  position: relative;
}

#map_point img {
  display: block;
  width: 100%;
}

.point-list {
  position: absolute;
  width: 0;
  height: 0;
}

.point-list .iconfont {
  font-size: 42px;
  color: #1e94ff;
  margin-right: 0;
  cursor: pointer;
  position: relative;
  top: -42px;
  left: -20px;
}

.domContainer {
  position: absolute;
  top: 5px;
  left: 12px;
}

.domContainer_corner {
  position: relative;
  top: -10px;
  left: -10px;
}

.domContainer_corner .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7ac0f7;
  position: absolute;
  left: 4px;
  top: 5px;
}

/*警报*/
.pulse {
  /*background: rgba(239, 45, 2, 0.8) !important;*/
  -webkit-animation: warn 0.9s ease-out;
  -moz-animation: warn 0.9s ease-out;
  animation: warn 0.9s ease-out;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  /*box-shadow: 1px 1px 30px #EF2D02;*/
}

.pulse, .pulse-big {
  position: absolute;
  width: 50px;
  height: 50px;
  /*border: 2px solid #EF2D02;*/
  /*background: rgba(239, 45, 2, 0.8);*/
  border-radius: 50%;
  z-index: 100;
  opacity: 0;
  top: -15px;
  left: -16px;
}

.warningColor {
  border: 2px solid #EF2D02;
  background: rgba(239, 45, 2, 0.8);
}

.warningBg {
  background: rgba(239, 45, 2, 0.8) !important;
  box-shadow: 1px 1px 30px #EF2D02;
}

.successBg {
  background: rgb(255, 146, 0) !important;
  box-shadow: 1px 1px 30px #ff9f00;
}

.successColor {
  border: 2px solid #EF2D02;
  background: rgba(239, 45, 2, 0.8);
}

@keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.text-red {
  width: 2px;
  height: 2px;
  background: red;
}

.point-text {
  display: flex;
  justify-content: center;
}

.point-text span {
  white-space: nowrap;
  color: #000;
  font-weight: bold;
}
</style>


